<template>
	<view class="content">
		<view class="Box">
			<view class="BoxView">
				<view class="BoxOne">
					<u--image :showLoading="true" src="../../../static/logo.png" width="138rpx" height="138rpx"
						radius="0" shape="circle"></u--image>
					<view class="BoxContent">
						<view class="BoxTop marginBottom">
							<text class="title">Ren</text>
							<!-- <view>普通推广员</view> -->
						</view>
						<view class="BoxTop">
							<view class="rightView">
								<text class="Newtitle">普通推广员</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="userinfoBody">
			<view class="money_Flex">
				<view>
					<text class="title">可提现金额（元）</text>
					<text class="money">10.00</text>
				</view>
				<button class="Withdrawal" @click="linkUrl('/pages/Mine/Withdrawal')" :style="{backgroundColor:$store.state.primaryColor}">提现</button>
			</view>
			<view class="info_Flex">
				<view>
					<text class="title">累计订单</text>
					<text class="num">1</text>
				</view>
				<view>
					<text class="title">累计客户</text>
					<text class="num">1</text>
				</view>
				<view>
					<text class="title">下级推广员</text>
					<text class="num">1</text>
				</view>
			</view>
			<button class="qrcode" @click="iSshow = true" :style="{backgroundColor:$store.state.primaryColor}">生成推广二维码</button>
		</view>
		
		<view class="headerTitle">
			<view class="headerLeft">
				<view></view>
				<text>推广活动</text>
			</view>
			<u--image :showLoading="true" src="../../../static/more.png" width="28rpx" height="28rpx"
				radius="0"></u--image>
		</view>
		
		<view class="courseBody">
			<view v-for="(item,index) in 3" :key="index" class="item_View">
				<u--image :showLoading="true" src="../../../static/logo.png" width="166rpx" height="231.17rpx"
					radius="10"></u--image>
				<view class="courseRight">
					<text class="title">【1V1】欧美外教1节/周30分钟</text>
					<text class="money">￥69.0</text>
					<view class="view">
						<u--image :showLoading="true" src="../../../static/Mine/yhj.png" width="28rpx" height="28rpx"
							radius="0"></u--image>
						<text>直接推广佣金 ¥10</text>	
					</view>
					<view class="view">
						<u--image :showLoading="true" src="../../../static/Mine/yhj.png" width="28rpx" height="28rpx"
							radius="0"></u--image>
						<text>间接推广佣金 ¥5</text>	
					</view>
					<button :style="{backgroundColor:$store.state.primaryColor}">推广</button>
				</view>	
			</view>
		</view>
		
		<u-popup :show="iSshow" @close="iSshow = false" @open="iSshow = true" mode="bottom" :closeable="false" :round="50">
			<view class="popupBody">
				<view class="headersBody">
					<u-icon name="close" color="#ebf7ff" size="20"></u-icon>
					<text>推广二维码</text>
					<u-icon name="close" color="#888888" size="20" @click="iSshow = false"></u-icon>
				</view>
				<view class="qrcode">
					
				</view>
				<view class="buttonFlex">
					<button class="leftButton" :style="{backgroundColor:$store.state.primaryColor}">分享链接</button>
					<button class="rightButton" :style="{backgroundColor:$store.state.primaryColor}">保存相册</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				iSshow:false
			}
		},
		methods:{
			linkUrl(e){
				uni.navigateTo({
					url:e
				});
			}
		}
	}
</script>

<style>
	page{
		width:100%;
		height:100%;
		background: linear-gradient( 170deg, #EDF6FD 0%, #C8EEFD 19%, #FFFFFF 100%, #FFFFFF 100%);
	}
</style>
<style scoped lang="scss">
	.content{
		.Box{
			.BoxView{
				width:85%;
				margin:0px auto;
				// background-color: transparent;
				border-radius:20rpx;
				padding:20rpx 30rpx 30rpx 30rpx;
				margin-top:20rpx;
				.time{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #888888;
					display: block;
					margin-bottom:20rpx;
				}
			}
			.BoxOne{
				display: flex;
				align-items: center;
				.marginBottom{
					margin-bottom:10rpx;
					view{
						background-color:#55aaff;
						color:#fff;
						font-size: 24rpx;
						font-weight: 400;
						border-radius:5rpx;
						padding:3rpx 10rpx 5rpx 10rpx;
						margin-left:20rpx;
					}
				}
				.BoxTop{
					margin-left:15rpx;
					display: flex;
					align-items: center;
					.price{
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #029CFE;
					}
					.rightView{
						display: flex;
						align-items: center;
						/deep/ .u-image{
							margin-left:80rpx;
						}
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #888888;
						}
					}
					text{
						display: block;
						font-size:24rpx;
					}
					
					.title{
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 36rpx;
						color: #333333;
						font-style: normal;
					}
					.Newtitle{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #8E8F8E;
						font-style: normal;
					}
				}
			}
		}
		.userinfoBody{
			width:80%;
			height:auto;
			background-color:#fff;
			border-radius: 30rpx;
			margin:0px auto;
			padding:50rpx 50rpx 60rpx 50rpx;
			.money_Flex{
				width:100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				view{
					text{
						display: block;
					}
					.title{
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #202020;
						margin-bottom:5rpx;
					}
					.money{
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 36rpx;
						color: #202020;
					}
				}
				.Withdrawal{
					width:154rpx;
					height:55rpx;
					background-color:#2283ff;
					font-size:26rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color:#fff;
					border-radius:50rpx;
					margin:0rpx;
				}
			}
			.info_Flex{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top:80rpx;
				view{
					text{
						display: block;
						text-align: center;
						margin-top:10rpx;
					}
					.title{
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #202020;
					}
					.num{
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 36rpx;
						color: #202020;
					}
				}
			}
			.qrcode{
				width:100%;
				height:70rpx;
				background: linear-gradient( 270deg, #3078FF 0%, #009DFE 100%);
				border-radius:50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size:32rpx;
				margin-top:40rpx;
				letter-spacing:2rpx;
			}
		}
		.headerTitle{
			width:90%;
			margin:0px auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top:50rpx;
			.headerLeft{
				display: flex;
				align-items: center;
				view{
					width: 10rpx;
					height: 34rpx;
					background: #029CFE;
					border-radius: 6rpx;
				}
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #333333;
					margin-left:15rpx;
				}
			}
		}
		.courseBody{
			width:90%;
			margin:0px auto;
			.item_View{
				display: flex;
				margin-top:30rpx;
				background-color:#fff;
				border-radius:30rpx;
				padding:30rpx;
				.courseRight{
					margin-left:15rpx;
					.title{
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #333333;
					}
					.money{
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #029CFE;
						display: block;
						margin-top:5rpx;
						margin-bottom:10rpx;
					}
					.view{
						display: flex;
						align-items: center;
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #888888;
							margin-left:10rpx;
						}
					}
					button{
						width: 246rpx;
						height: 54rpx;
						background: linear-gradient( 270deg, #3078FF 0%, #009DFE 100%);
						border-radius: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color:#fff;
						margin:0px;
						font-size:29rpx;
						letter-spacing:2rpx;
						margin-top:20rpx;
					}
				}
			}
		}
		.popupBody{
			.headersBody{
				display: flex;
				justify-content:space-between;
				background-color:#ebf7ff;
				padding:30rpx;
				border-top-left-radius:30rpx;
				border-top-right-radius:30rpx;
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #202020;
				}
			}
			.qrcode{
				width:332rpx;
				height:302rpx;
				margin:0px auto;
				background-color:#000000;
				margin-top:40rpx;
			}
			.buttonFlex{
				margin-top:50rpx;
				margin-bottom:50rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.leftButton{
					width:40%;
					height:75rpx;
					margin:0px;
					background-color:#efefef;
					color:#333;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius:50rpx;
					font-size:28rpx;
					letter-spacing:2rpx;
				}
				.rightButton{
					width:40%;
					height:75rpx;
					margin:0px;
					background-color:#277ffe;
					color:#fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius:50rpx;
					font-size:28rpx;
					letter-spacing:2rpx;
				}
			}
		}
	}
</style>